<template>
  <div id="FilmList">
    <el-table :data="tableData" height="770" style="width: 100%">
      <el-table-column visEdit="true" width="100px" prop="name" label="电影名">
        <template slot-scope="scope">
          <div class="filmname">
            <img :src="scope.row.cover" alt="" />
            <span>{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="120px" prop="releaseTime" label="上映时间">
      </el-table-column>
      <el-table-column width="70px" prop="type" label="类型"> </el-table-column>
      <el-table-column width="86px" prop="status" label="上架状态">
        <template slot-scope="scope">
          <div class="status">
            <span v-if="scope.row.status == '1'">上架</span>
            <span v-if="scope.row.status == '0'">下架</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="133px" prop="region" label="地区">
      </el-table-column>
      <el-table-column width="110px" prop="duration" label="电影时长">
        <template slot-scope="scope">
          <div class="duration">
            <span>{{ scope.row.duration }}分钟</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <!-- 表头输入框 -->
        <template slot="header" slot-scope="scope">
          <el-input
            :change="select()"
            v-model="seacher"
            placeholder="请输入内容"
            >{{ scope.row }}</el-input
          >
        </template>
        <!-- 单元格按钮 -->
        <template slot-scope="scope">
          <div class="edit">
            <el-button @click="edit(scope.row.id)" type="primary"
              >修改</el-button
            >
            <el-button @click="arrFilm(scope.row.id)" type="success"
              >排片</el-button
            >
            <el-button @click="remove(scope.row.id)" type="danger"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹出框 -->
    <div class="editRevise">
      <el-dialog title="电影信息修改" :visible.sync="revise" width="680px">
        <!-- 电影封面 -->
        <div class="tablecover">
          <span>电影封面</span>
          <div class="coverinner">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8888/api/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="film.cover" :src="film.cover" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span>只能上传jpg文件,且不超过50mb</span>
          </div>
        </div>
        <!-- 电影名称 -->
        <div class="tablefilmName">
          <span>电影名称</span>
          <el-input v-model="film.name" placeholder="请输入内容"></el-input>
        </div>
        <!-- 上映地区 -->
        <div class="tableregion">
          <span>上映地区</span>
          <el-select v-model="film.region" placeholder="请选择">
            <el-option
              v-for="item in regions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 全片时长 -->
        <div class="tableduration">
          <span>全片时长</span>
          <el-input-number
            v-model="film.duration"
            :min="1"
            :max="300"
          ></el-input-number>
        </div>
        <!-- 上映时间 -->
        <div class="tableReleaseTime">
          <span>上映时间</span>
          <el-date-picker
            v-model="film.releaseTime"
            type="date"
            placeholder="选择日期"
            format="yyyy年MM月dd日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <!-- 是否上架 -->
        <div class="tableisListed">
          <span>是否上架</span>
          <el-switch
            v-model="film.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
        <!-- 电影类型 -->
        <div class="tabletype">
          <span>电影类型</span>
          <el-select v-model="film.type" placeholder="请选择">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 内容简介 -->
        <div class="tableintroduction">
          <span>内容简介</span>
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="film.introduction"
            resize="none"
          >
          </el-input>
        </div>

        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="revise = false">取 消</el-button>
          <el-button type="primary" @click="revisefilm">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 排片弹出框 -->
    <div class="editArrangement">
      <el-dialog title="新增电影排片" :visible.sync="arrangement" width="680px">
        <!-- 电影名称 -->
        <div class="tablename">
          <span>电影名称</span>
          <el-input
            v-model="newArrFilm.name"
            placeholder="请输入内容"
            :disabled="true"
          ></el-input>
        </div>
        <!-- 开放座位 -->
        <div class="tableopenseats">
          <span>开放座位</span>
          <el-input-number
            v-model="newArrFilm.openseats"
            :min="1"
            :max="40"
            label="开放多少座位"
          ></el-input-number>
        </div>
        <!-- 放映类型 -->
        <div class="tableType">
          <span>放映类型</span>
          <el-select v-model="newArrFilm.type" placeholder="请选择">
            <el-option
              v-for="item in arrTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 放映日期 -->
        <div class="tableDate">
          <span>放映日期</span>
          <el-date-picker
            v-model="newArrFilm.date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <!-- 放映时间 -->
        <div class="tableTime">
          <span>放映时间</span>
          <el-time-picker
            is-range
            v-model="newArrFilm.time"
            :picker-options="{
              selectableRange: '00:00:00- 23:59:59',
            }"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </div>
        <!-- 电影票价 -->
        <div class="tableTicket">
          <span>电影票价</span>
          <el-input-number
            v-model="newArrFilm.price"
            :min="1"
            :max="100"
            :precision="2"
            :step="0.1"
          ></el-input-number>
        </div>
        <!-- 排片人 -->
        <div class="tableEmp">
          <span>排片人</span>
          <el-input
            v-model="newArrFilm.founder"
            placeholder="请输入内容"
            :disabled="true"
          ></el-input>
        </div>

        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="arrangement = false">取 消</el-button>
          <el-button type="primary" @click="arrgement">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getFilmList,
  reviseFilm,
  removeFilm,
  arrgementFilm,
  query,
} from "@/api/admin";
export default {
  name: "FilmList",
  data() {
    return {
      revise: false,
      arrangement: false,
      tableData: [
        {
          cover: "",
          name: "",
          releaseTime: "",
          type: "",
          status: "",
          region: "",
          address: "",
          duration: "",
          introduction: "",
        },
      ],
      seacher: "",
      film: {
        id: "",
        cover: "",
        name: "",
        region: "",
        duration: "",
        releaseTime: "",
        status: false,
        type: "",
        introduction: "",
        hot: 0,
      },
      regions: [
        {
          value: "内地",
          label: "内地",
        },
        {
          value: "香港",
          label: "香港",
        },
        {
          value: "台湾",
          label: "台湾",
        },
        {
          value: "美国",
          label: "美国",
        },
        {
          value: "韩国",
          label: "韩国",
        },
        {
          value: "日本",
          label: "日本",
        },
        {
          value: "泰国",
          label: "泰国",
        },
        {
          value: "印度",
          label: "印度",
        },
        {
          value: "法国",
          label: "法国",
        },
        {
          value: "英国",
          label: "英国",
        },
        {
          value: "德国",
          label: "德国",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      types: [
        {
          value: "家庭",
          label: "家庭",
        },
        {
          value: "惊悚",
          label: "惊悚",
        },
        {
          value: "科幻",
          label: "科幻",
        },
        {
          value: "爱情",
          label: "爱情",
        },
        {
          value: "动作",
          label: "动作",
        },
        {
          value: "喜剧",
          label: "喜剧",
        },
        {
          value: "恐怖",
          label: "恐怖",
        },
        {
          value: "悬疑",
          label: "悬疑",
        },
        {
          value: "犯罪",
          label: "犯罪",
        },
        {
          value: "冒险",
          label: "冒险",
        },
        {
          value: "战争",
          label: "战争",
        },
        {
          value: "历史",
          label: "历史",
        },
        {
          value: "武侠",
          label: "武侠",
        },
        {
          value: "传记",
          label: "传记",
        },
        {
          value: "古装",
          label: "古装",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      arrTypes: [
        {
          value: "2D",
          label: "2D",
        },
        {
          value: "3D",
          label: "3D",
        },
      ],
      newArrFilm: {
        id: "",
        name: "",
        openseats: 30,
        type: "",
        date: "",
        time: ["", ""],
        price: 30.5,
        founder: localStorage.getItem("id"),
      },
    };
  },
  methods: {
    // 获取电影列表
    FilmList: function () {
      getFilmList("全部", "全部").then((res) => {
        this.tableData = res.data;
      });
    },
    // 图片上传成功的生命周期
    handleAvatarSuccess(res) {
      this.film.cover = res.data;
    },
    // 图片上传前的生命周期
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 50;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 50MB!");
      }
      return isJPG && isLt2M;
    },
    // 修改按钮
    edit: function (id) {
      this.revise = true;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == id) {
          this.film = JSON.parse(JSON.stringify(this.tableData[i]));
          if (this.tableData[i].status === 1) {
            this.film.status = true;
            break;
          }
        }
      }
    },
    // 修改电影信息
    revisefilm: function () {
      let sta = 0;
      if (this.film.status === true) {
        sta = 1;
      }
      reviseFilm(
        this.film.id,
        this.film.name,
        this.film.releaseTime,
        this.film.type,
        sta,
        this.film.region,
        this.film.hot,
        this.film.introduction,
        this.film.cover,
        this.film.duration
      ).then((res) => {
        if (res.code === 200) {
          this.revise = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.film.status = sta;
          console.log("filmid" + this.film.id);
          for (let i = 0; i < this.tableData.length; i++) {
            console.log(this.tableData[i].id);
            if (this.tableData[i].id == this.film.id) {
              this.tableData[i] = JSON.parse(JSON.stringify(this.film));
              console.log("tabledata", this.tableData);
              console.log(this.film);
            }
          }
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },

    // 排片按钮
    arrFilm: function (id) {
      this.arrangement = true;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == id) {
          this.newArrFilm.name = this.tableData[i].name;
          this.newArrFilm.id = this.tableData[i].id;
          break;
        }
      }
    },
    // 排片
    arrgement: function () {
      arrgementFilm(
        this.newArrFilm.id,
        this.newArrFilm.name,
        this.newArrFilm.openseats,
        this.newArrFilm.price,
        this.newArrFilm.type,
        this.newArrFilm.date,
        this.newArrFilm.time[0],
        this.newArrFilm.time[1],
        this.newArrFilm.founder
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "排片成功",
            type: "success",
          });
          this.arrangement = false;
        } else {
          this.$message({
            message: "排片失败",
            type: "error",
          });
        }
      });
    },

    // 删除电影
    remove: function (id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removeFilm(id).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].id == id) {
                  this.tableData.slice(i, i + 1);
                }
              }
            } else {
              this.$message({
                message: "删除失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 模糊查询
    select: function () {
      if (this.seacher == "") {
        this.FilmList();
      } else {
        query(this.seacher).then((res) => {
          this.tableData = res.data;
        });
      }
    },
  },
  mounted() {
    setTimeout(() => {
      this.FilmList();
    }, 1000);
  },
};
</script>

<style lang="less" scoped>
#FilmList {
  // 电影图片和名字
  .filmname {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 92px;
      height: 132px;
    }
  }
  // 电影时长
  .duration {
    width: 80px;
    height: 34px;
    border: 1px solid rgba(14, 175, 192, 1);
    border-radius: 5px;
    span {
      display: block;
      text-align: center;
      color: rgba(14, 175, 192, 1);
      line-height: 34px;
    }
  }
  // 编辑按钮列表
  .edit {
    .el-button {
      width: 98px;
      text-align: center;
      font-weight: 34px;
    }
  }
  // 修改按钮
  .editRevise {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    // 封面
    .tablecover {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      .coverinner {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        .avatar-uploader .el-upload {
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          border: 1px dashed #d9d9d9;
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          display: block;
        }
      }
    }
    // 电影名称
    .tablefilmName {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .el-input {
        width: 496px;
        margin-left: 20px;
      }
    }
    // 上映地区
    .tableregion {
      margin-bottom: 10px;
      .el-select {
        margin-left: 20px;
      }
    }
    // 全片时长
    .tableduration {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .el-input-number {
        margin-left: 20px;
      }
    }
    // 上映时间
    .tableReleaseTime {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 20px;
      }
    }
    // 是否上架
    .tableisListed {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-switch {
        margin-left: 20px;
      }
    }
    .tabletype {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-select {
        margin-left: 20px;
      }
    }
    .tableintroduction {
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      .el-textarea {
        width: 494px;
        margin-left: 20px;
      }
    }
  }
  // 排片按钮
  .editArrangement {
    display: flex;
    flex-direction: column;
    // 表单中电影名
    .tablename {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input {
        margin-left: 10px;
        width: 496px;
      }
    }
    // 表单中开放座位
    .tableopenseats {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input-number {
        margin-left: 10px;
      }
    }
    // 表单中放映类型
    .tableType {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-select {
        margin-left: 10px;
      }
    }
    .tableDate {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    .tableTime {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    .tableTicket {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    .tableEmp {
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input {
        margin-left: 23px;
        width: 496px;
      }
    }
  }
}
</style>